<template>
	<view class="container">
		<view class="title">
			{{type==='first'?'第一联系人':'第二联系人'}}
		</view>
		<view class="form">
			<view class="item">
				<text>姓名：</text>
				<input type="text" value="" v-model="name" placeholder="请输入您的姓名" placeholder-class="cl" />
			</view>
			<view class="item">
				<text>身份证号码：</text>
				<input type="text" value="" v-model="cardNum" placeholder="请输入您的身份证号码" placeholder-class="cl" />
			</view>
			<view class="item">
				<text>亲属关系：</text>
				<input type="text" value="" v-model="guanxi" placeholder="请输入您与孩子的关系" placeholder-class="cl" />
			</view>
			<view class="item">
				<text>联系方式：</text>
				<input type="text" value="" v-model="phone" placeholder="请输入您的电话" placeholder-class="cl" />
			</view>
		</view>
		<view class="secTitle">
			上传身份证
		</view>
		<view class="cardContainer">
			<view class="cardItem">
				<image :src="cardA?cardA:card1" mode="" @click="uploadCard(1)"></image>
			</view>
			<view class="cardItem">
				<image :src="cardB?cardB:card2" mode="" @click="uploadCard(2)"></image>
			</view>
		</view>
		<view class="save" @click="save">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "",
				cardNum: "",
				guanxi: "",
				phone: "",
				cardA: '',
				cardB: '',
				type: "",
				card1:require('../../../static/img/carda.png'),
				card2: require('../../../static/img/cardb.png'),
			}
		},
		onLoad: function(option) {
			this.type = option.type;
			uni.showLoading({
				title: '加载中'
			});
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					this.token = res.data.token;
					this.getData()
				},
				fail: (res) => {
					uni.redirectTo({
						url: '../../login/auth'
					});
				}
			});
		},
		methods: {
			uploadCard(type) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths //图片临时数组
						uni.uploadFile({
							//请求的url接口地址
							url: 'https://mx.acktechnologies.com.cn/api/wxapp/common/uploadImage',
							formData: {
								//请求中接口额外的参数
								'token': this.token
							},
							fileType: 'file', //图片类型
							filePath: tempFilePaths[0], //哪张图片
							name: 'file', //对应接口的文件名称
							header: { //请求头
								"Content-Type": "multipart/form-data"
							},
							success: (res) => {
								//成功的回调
								//一般用于重新获取数据渲染页面
								console.log(res)
								let info = JSON.parse(res.data)
								console.log(info)
								if (info.code === 1) {
									if (type === 1) {
										this.cardA = info.data.url;
									} else {
										this.cardB = info.data.url;
									}

								}
							},
							fail: (err) => {
								//失败的回调
								console.log(err)
							}
						})
					}
				})
			},
			save() {
				if (this.name === '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return false;
				}
				if (this.cardNum === '') {
					uni.showToast({
						title: '请输入身份证号码',
						icon: 'none'
					});
					return false;
				}
				if (this.cardA === '') {
					uni.showToast({
						title: '请上传证件正面',
						icon: 'none'
					});
					return false;
				}
				if (this.cardB === '') {
					uni.showToast({
						title: '请上传证件反面',
						icon: 'none'
					});
					return false;
				}
				if (this.phone === '') {
					uni.showToast({
						title: '请输入联系方式',
						icon: 'none'
					});
					return false;
				}

				if (this.guanxi === '') {
					uni.showToast({
						title: '请输入亲属关系',
						icon: 'none'
					});
					return false;
				}
				uni.request({
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					url: `https://mx.acktechnologies.com.cn/api/wxapp/mine/info/contactSave`,
					data: {
						"token": this.token,
						"type": this.type,
						"name": this.name,
						"id_number": this.cardNum,
						"id_card_a": this.cardA,
						"id_card_b": this.cardB,
						"mobile": this.phone,
						"relation": this.guanxi
					},
					method: 'POST',
					success: res => {
						console.log(res)
						if (res.data.code === 1) {
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							});
						} else if (res.data.code === 403) {
							uni.redirectTo({
								url: '../login/auth'
							});
						} else {
							uni.showToast({
								title: '服务器开小差了呢，请您稍后再试',
								icon: 'none'
							})
						}
					},
					fail: () => { //接口请求失败的处理
						uni.showToast({
							title: '服务器开小差了呢，请您稍后再试',
							icon: 'none'
						})
					},
				});
			},
			getData() {
				uni.request({
					url: `https://mx.acktechnologies.com.cn/api/wxapp/mine/info/contactInfoLoad`,
					data: {
						"token": this.token,
						"type": this.type
					},
					method: 'GET',
					success: res => {
						console.log(res)
						if (res.data.code === 1) {
							let info = res.data.data;
							this.name = info.name;
							this.cardNum = info.id_number;
							this.guanxi = info.relation;
							this.phone = info.mobile;
							if (info.id_card_a) {
								this.cardA = info.id_card_a;
							}
							if (info.id_card_b) {
								this.cardB = info.id_card_b;
							}
							uni.hideLoading();
						} else if (res.data.code === 403) {
							uni.redirectTo({
								url: '../login/auth'
							});
						} else {
							uni.showToast({
								title: '服务器开小差了呢，请您稍后再试',
								icon: 'none'
							})
						}
					},
					fail: () => { //接口请求失败的处理
						uni.showToast({
							title: '服务器开小差了呢，请您稍后再试',
							icon: 'none'
						})
					},
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
		overflow: hidden;
	}

	.title {
		font-size: 15px;
		font-weight: 500;
		color: #333333;
		margin-top: 20px;
		margin-left: 40rpx;
		margin-bottom: 30rpx;
	}

	.secTitle {
		font-size: 15px;
		color: #666666;
		margin: 20px 0 12px 18px;
	}

	.form {
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.item {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 90rpx;
		line-height: 90rpx;

		text {
			font-size: 15px;
			color: #666666;
		}

		/deep/ .cl {
			font-size: 13px;
			color: #D5D5D5;
		}
	}

	.cardContainer {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 0 20rpx;

		.cardItem {
			border-radius: 8px;
			overflow: hidden;

			image {
				display: block;
				width: 350rpx;
				height: 240rpx;
			}
		}
	}

	.save {
		width: 700rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: linear-gradient(90deg, #9BDFB5 0%, #84DFD1 100%);
		border-radius: 40rpx;
		margin: 60px auto 0 auto;
		font-size: 18px;
		color: #FFFFFF;
	}
</style>
